<template>
	<navbar title="填写预约信息" :isBack="true"></navbar>
	<view class="page">
		<view class="" style="background-color: white;border-radius: 10rpx;padding: 30rpx 30rpx 0 30rpx">
			<view class="" style="font-size: 32rpx;color: #5062A7;font-weight: bold;">
				预约信息
			</view>
			<view class="" style="padding-left: 20rpx;">
				<u-form :model="Info" :rules="rules" label-width="180" :label-style="{'font-size':'32rpx'}">
					<u-form-item label="预约日期" prop="name" required>
						<view class="" @click="openDate"
							style="display: flex;justify-content: space-between;align-items: center;">
							<view class="" v-if="Info.yy_date" style="font-size: 32rpx;">
								{{Info.yy_date}}
							</view>
							<view class="" v-else  style="color: #c0c4cc;font-size: 32rpx;">
								请选择预约日期
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<!-- <u-picker v-model="pickerShow" mode="time"></u-picker> -->

					</u-form-item>
					<!-- <u-form-item label="地址" prop="sex" required>
						<u-input :custom-style="{'font-size':'32rpx'}" v-model="Info.name" />
					</u-form-item> -->
					<u-form-item label="预约人数" prop="name" required><u-input :custom-style="{'font-size':'32rpx'}"
							v-model="Info.num" placeholder="请输入"/></u-form-item>
					<u-form-item label="所在地址" prop="name" required>
						<view class="" @click="openAddress"
							style="display: flex;justify-content: space-between;align-items: center;">
							<view class="" style="font-size: 32rpx;">
								<span>{{Info.province}}{{Info.city}}</span>
								<span v-if="!Info.province" style="color: #c0c4cc;">请选择所在地址</span>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<!-- <u-action-sheet :list="actionList" v-model="actionShow"></u-action-sheet> -->
					</u-form-item>
					<u-form-item label="预约人姓名" prop="name" required><u-input :custom-style="{'font-size':'32rpx'}"
							v-model="Info.name" placeholder="请输入"/></u-form-item>
					<u-form-item label="电话号码" prop="name" required :border-bottom="false"><u-input :custom-style="{'font-size':'32rpx'}"
							v-model="Info.mobile" placeholder="请输入"/></u-form-item>
				</u-form>
			</view>
		</view>
	</view>
	<view class="" style="position: absolute;bottom: 190rpx;display: flex;align-items: center;left: 40rpx;">
		<u-checkbox @change="checkboxChange" v-model="checked" shape="circle" active-color="#5062A7">
			<view class="" style="font-size: 32rpx;">
				我已阅读并同意<span style="color: #5062A7;">《报名须知》</span>
			</view>
		</u-checkbox>
		<!-- <image src="/static/image/radio-active.png" style="width: 40rpx;height: 40rpx;" mode=""></image> -->

	</view>
	<view class="" style="background-color: white;position: fixed;bottom: 0rpx;width: 100%;">
		<view class="" style="display: flex;justify-content: center;width: 100%;margin-bottom: 68rpx;">
			<view class=" " style="width: 690rpx;height: 100rpx;color:white;border-radius: 10rpx;background: linear-gradient(90deg, #5062A7 0%, #354678 100%);font-size: 32rpx;display: flex;justify-content: center;align-items: center;" @click="pushResult">
				立即预约
			</view>
		</view>
	</view>
	<u-picker v-model="pickerShow" :mode="pickMode" @confirm="pickerConfirm" :params="pickerParams"></u-picker>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import {reservation} from '@/service/api/reservation'
import tools from '@/utils/tools';
	const Info = reactive({
		yy_date: '',
		num: '',
		province: '',
		city: '',
		mobile: '',
		name:""
	})
	const pickerParams = reactive({
		province:true,
		city:true,
		area:true,
		year:true,
		month:true,
		day:true
	})
	const pickMode = ref('time');
	const rules = reactive({
		name: [
			{ require: true, message: '请输入姓名', trigger: 'change' }
		]
	})
	const sexList = ref([
		{
			name: '男'
		},
		{
			name: '女'
		}
	])
	const actionList = ref([
		{
			text: '身份证'
		}, {
			text: '其他'
		}
	]);
	const checked = ref(false)
	const pickerShow = ref(false);
	const radioGroupChange = (name : string) => {
		console.log(name);
	}
	//阅读须知
	const checkboxChange = (val : any) => {
		console.log(val);
	}
	//预约日期
	const openDate = () => {
		pickMode.value = 'time';
		pickerParams.province = false;
		pickerParams.city = false;
		pickerParams.area = false;
		pickerParams.month = true;
		pickerParams.year = true;
		pickerParams.day = true
		pickerShow.value = true
	}
	//所在地址
	const openAddress = () => {
		pickMode.value = 'region';
		pickerParams.province = true;
		pickerParams.city = true;
		pickerParams.area = false;
		pickerParams.month = false;
		pickerParams.year = false;
		pickerParams.day = false
		pickerShow.value = true
	}
	const pushResult = async()=>{
		if(!checked.value){
			tools.showToast('请先阅读报名须知');
			return
		}
		const res = await reservation(Info);
		if(res.code == 1){
			// uni.navigateTo({
			// 	url:'/pagesB/custom/result'
			// })
			tools.navTo('/pagesB/custom/result',4)
		}else{
			tools.showToast(res.msg)
		}
		console.log(res);
		
	}
	const pickerConfirm = (value:any)=>{
		if(pickMode.value == 'region'){
			//地址
			Info.province = value.province.name;
			Info.city = value.city.name;
		}else{
			//日期
			Info.yy_date = value.year + '-' + value.month + '-' + value.day
		}
		console.log(value);
	}
</script>

<style scoped lang="scss">
	.page {
		min-height: calc(100vh - 68px);
		background-color: #F8F8F9;
		overflow: hidden;
		padding: 20rpx 30rpx;
	}

	.btn {
		display: flex;
		align-items: center;
		height: 100rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: white;

		.btn-left {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			height: 100rpx;
			padding-left: 30rpx;
		}

		.btn-right {
			background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
			width: 490rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			margin-left: 30rpx;
		}
	}
</style>